<template>
  <div class="counter_vue">
    <ul>
      <li>计数器</li>
      <li>计数器</li>
      <li>计数器</li>
    </ul>
    <ul class="ul1">
      <li>计数器</li>
      <li>计数器</li>
      <li>计数器</li>
    </ul>
    <ul class="ul2">
      <li>计数器</li>
      <li>计数器</li>
      <li>计数器</li>
    </ul>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.counter_vue {
  display: grid;
  grid-template-columns: repeat(3,1fr);

  .ul1 {
    counter-reset: listCounter; /*初始化计数器*/
    li {
      counter-increment: listCounter; /*计数器增长*/
    }
    li::before {
      content: counter(listCounter); /*计数器显示*/
      padding-right: 10px;
    }
  }

  .ul2 {
    counter-reset: listCounter; /*初始化计数器*/
    li {
      counter-increment: listCounter; /*计数器增长*/
    }
    li::before {
      content: counter(listCounter, upper-roman); /*计数器显示*/
      padding-right: 10px;
    }
  }
}
</style>
